<template>
	<view class="app-system-pay-layout-form" :style="[AppSkinVar]">
		<goods-layout-form ref="goodsLayoutFormRef" :value="formAnswerList" :info="formData.form" disabled :price="0" :number="0" v-if="formData"></goods-layout-form>
		<view class="app-system-pay-layout-form__footer fixed-bottom bg-white e-flex-xy-center">
			<view class="fw-500">
				<text>{{ $t('common.totalPrice') }}{{ $t('common.:') }}</text>
				<text class="c-red">{{ global.unitEn }}{{ priceFormat(formData?.subFormDto?.totalPrice || 0, 2) }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getLayoutFormOrderInfo  } from '@/common/request/api';
import type { LayoutFormOrderItem, CardFormData } from '@/common/request/api';
import type { LayoutFormModelValue } from '@/typings';
import { priceFormat } from '@/common/utils';
import { useCurrentInstance } from '@/common/hooks';
import { useGlobal } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { onLoad } from '@dcloudio/uni-app';

const props = defineProps<{
	id: string;
}>();

const { global } = storeToRefs(useGlobal());

const info = ref<LayoutFormOrderItem>();
const formData = computed<CardFormData | undefined>(() => {
	if (info.value?.formJson) {
		return JSON.parse(info.value.formJson);
	}
	return undefined;
});

const formAnswerList = computed(() => {
	if (formData.value) {
		return formData.value.form.formOptions.map((item) => {
			const answer = formData.value!.subFormDto.list.find((items) => items.formOptionsId === item.id);
			let formOptionsInfoId: undefined | string | string[] = undefined;
			let vle = answer?.vle;
			let formOptionsInfoIdText = answer?.formOptionsInfoIdText || ''; //有“其他”选项的题目，用于存储选择“其他”选项时输入框输入的内容
			if (answer && answer.formOptionsInfoId) {
				formOptionsInfoId = answer.formOptionsInfoId;
				if ([3, 4, 5].includes(item.type)) {
					// 3为单选、4为多选，5为下拉选择
					// 其中3、4有其他选项，formOptionsInfoId有可能为json数组
					// 2024/10/21 json数组形式已弃用，改为formOptionsInfoIdText存储
					// 但为兼容旧数据解析，保留此段代码
					if (formOptionsInfoId[0] === '[') {
						// 是json数组，则代表多选题或单选题中选择了‘其它’这个选项，此时这个数组第零位是答案列表，第一位是选择‘其它’这个选项时输入的内容
						const arr: string[] = JSON.parse(formOptionsInfoId);
						formOptionsInfoId = arr[0];
						formOptionsInfoIdText = arr[1];
					}
					vle = '';
				}

				formOptionsInfoId = item.type === 4 ? formOptionsInfoId.split(',') : formOptionsInfoId;
			}

			return {
				formOptionsId: item.id,
				formOptionsInfoId: formOptionsInfoId || ([4, 5].includes(item.type) ? [] : ''),
				formOptionsInfoIdText,
				vle: vle || '',
				vleid: item.vleid || '',
				fileList: item.type === 6 ? (vle ? JSON.parse(vle) : []) : undefined
			};
		});
	}
	return [];
});

onLoad(() => {
	getLayoutFormOrderInfo({ id: props.id }).then((res) => {
		info.value = res.data;
		uni.setNavigationBarTitle({
			title: res.data.formTitle
		});
	});
});
</script>

<style lang="scss" scoped>
@include appBem_b(system-pay-layout-form) {
	padding-bottom: 110rpx;
	:deep(.app-components-goods-layout-form) {
		min-height: 100vh;
	}
	@include appBem_e(btn) {
		min-width: 360rpx;
		height: 90rpx;
		border-radius: 2rpx;
		padding: 0 20rpx;
	}

	@include appBem_e(footer) {
		height: 110rpx;
		padding: 0 20rpx;
	}
}
</style>
